$(function(){
	var gameData = [
		'img/modle0.jpg',
		'img/modle1.jpg',
		'img/modle2.jpg',
		'img/modle3.jpg',
		'img/modle4.jpg',
		'img/modle5.jpg',
		'img/modle6.jpg',
		'img/modle7.jpg',
	];
	
	function createPic(pic,num){
		return `<div data-num=${num}><img class='pic' src=${pic} /></div>`;
	}
	function createBlackLayer(num){
		return `<div data-num=${num}><img src='img/back2.jpg' /></div>`;
	}
	function createWin(score){
		return `<p>score:${score}</p>
				<button class="restart">Restart</button>`;
	}
	
	function startGame(){
		var tmpArr = gameData.slice();
		gameData.forEach(function(e){
			tmpArr.push(e);
		});
		tmpArr = remixArr(tmpArr);
		tmpArr.forEach(function(e,idx){
			$('.card-frame').append(createPic(e,idx));
			$('.black-layer').append(createBlackLayer(idx));
			$('.black-layer').children().eq(idx).on('click', blackLayerHandle);
		});
	}
	
	function remixArr(arr){
		var newArr=[];
		for(var i=0; i<arr.length;){
			var num = ~~(Math.random()*arr.length);
			newArr.push(arr[num]);
			arr.splice(num,1);
		}
		return arr=newArr;
	}
	
	var picSrcArr=[];
	var layerArr=[];
	var isWin=0;
	function blackLayerHandle(){
		if(layerArr.length < 2){
			$(this).css('opacity','0');
			var num = $(this).data('num');
			var picSrc = $($('.pic')[num])[0].src;
			if(layerArr[0] != this){
				layerArr.push(this);
				picSrcArr.push(picSrc);
			}
			if(picSrcArr.length == 2){
				setTimeout(function(){
					if(picSrcArr[0] != picSrcArr[1]){
						$(layerArr[0]).css('opacity','1');
						$(layerArr[1]).css('opacity','1');
					}else{
						$(layerArr[0]).off("click",blackLayerHandle);
						$(layerArr[1]).off("click",blackLayerHandle);
						isWin++;
						if(isWin == 8){
							win();
							isWin=0;
						}
					}
					layerArr=[];
					picSrcArr=[];
				},500);
			}
		}else{
			return;
		}
	}
	
	$('.cheat').on("click", cheatHandle);
//	var isCheat = false;
	function cheatHandle(){
//		if(!isCheat){
//			isCheat=true;			
//			$('.black-layer').css('opacity','0.6');
//			$(this).text("close");
//		}else{
//			isCheat=false;
//			$('.black-layer').css('opacity','1');
//			$(this).text("cheat");
//		}
		$('.black-layer').css('opacity','0.6');
		setTimeout(function(){
			$('.black-layer').css('opacity','1');
		},500);
	}
	
	
	function restartDownHandle(){
		$(this).css('margin-top','30px');
		$(this).css('box-shadow','none');
	}
	function restartUpHandle(){
		$(this).css('margin-top','25px');
		$(this).css('box-shadow','r(6px) r(10px) r(20px) #000000');
		$('.win').css('display','none');
		$('.start').css('transform','translateY(0)');
		clearInterval(timer);
		$('.time').text('0s');
	}
	
	$('.start').children().eq(1).on('touchstart',startDownHandle);
	$('.start').children().eq(1).on('touchend',startUpHandle);
	function startDownHandle(){
		$(this).css('margin-top','110px');
		$(this).css('box-shadow','none');
	}
	
	var timer;
	var t = 0;
	function startUpHandle(){
		$(this).css('margin-top','100px');
		$(this).css('box-shadow','r(6px) r(10px) r(20px) #000000');
		$(this).parent().css('transform','translateY(-100%)');
		$('.card-frame').html('');
		$('.black-layer').html('');
		startGame();
		timer=setInterval(function(){
			t++;
			$('.time').text('计时:'+t+'s');
		},1000);
	}
	
	$('.re-start').on('click', restartHandle);
	function restartHandle(){
		$('.win').css('display','none');
		$('.start').css('transform','translateY(0)');
		clearInterval(timer);
		$('.time').text('计时:0s');
		t=0;
		isWin=0;
	}
	
	function win(){
		clearInterval(timer);
		stopTime = new Date();
		$('.win').html(createWin(t));
		$('.win').css('display','block');
		$('.restart').on("touchstart", restartDownHandle);
		$('.restart').on("touchend", restartUpHandle);
		t=0;
	}
	
});